<template>
  <div>
    <div class="box-image">
      <div @click="drop" class="top">
        <img :src="form.flag" alt="">
        <div class="right">
          <van-icon size="20" name="arrow-down" />
        </div>
      </div>
      <div class="nav-drop" v-if="isDown">
        <div v-for="(item,index) in list" @click="submit(item)" :key="index" class="top">
          <img :src="item.flag" alt="">
          <div class="right">
            {{ item.lang }}
          </div>
        </div>
      </div>

    </div>
    <div class="btn-box" v-if="isChange">
      <van-loading size="60" color="#5A4CBB" />
    </div>
  </div>
</template>

<script>
import {getItem, setItem} from "@/utils/auth";

  export default {
    data(){
      return{
        isDown:false,
        form:{},
        isChange:false,
        list:[
          {id:1,lang:'English',flag:require('@/assets/images/Flag.png'),value:'en'},
          {id:2,lang:'中文简体',flag:require('@/assets/images/zh.png'),value: 'zh'},
         ]
      }
    },
    methods:{
      drop(){
        this.isDown = !this.isDown
      },
      submit(item){
        console.log(item)
        setItem('lang',item)
        this.isDown =false
        this.form= item
        this.isChange=true
        setTimeout(()=>{
          location.reload()
        },1500)
      }
    },
    mounted() {
      if (getItem('lang')){
        this.form = getItem('lang')
      }else{
        this.form = this.list[0]
        setItem('lang',this.form)
      }
    }
  }
</script>

<style scoped lang="scss">
.btn-box{
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: linear 0.4s topDown;
}
@keyframes topDown {
  0%{
    top: -100vh;
  }
  100%{
    top: 0;
  }
}
  .box-image{
    min-width: 80px;
    min-height: 36px;
    background: rgba(255,255,255,0.5);
    border-radius: 20px 20px 20px 20px;
    position: absolute;
    top: 63px;
    left: 9px;
    z-index: 9999;
    padding: 0 5px;
    .top{
      min-height: 36px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      img{
        width: 25px;
        height: 25px;
        background: #F0F0F0;
        border-radius: 50%;
        object-fit: cover;
        margin-left: 10px;
      }
      .right{
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-left: 10px;
        color: #666666;
      }
    }

  }
</style>